import React, { useMemo } from 'react';
import ReactJson from 'react-json-view';
import { getTheme, THEME_CONFIG } from '@/components/switch-theme/util';

const JsonView = (props: any) => {
  const { result, onChange } = props;

  const theme = useMemo(() => {
    return getTheme() === THEME_CONFIG[0].key ? 'bright' : 'monokai';
  }, []);

  return (
    <ReactJson
      src={result}
      theme={theme}
      onEdit={(v: any) => {
        onChange && onChange(v.updated_src);
      }}
      onAdd={(v: any) => {
        onChange && onChange(v.updated_src);
      }}
    />
  );
};

export default JsonView;
